{% extends "base.html" %}

{% load bootstrap_field from bootstrap3 %}
{% load i18n %}
{% load gross from prices_i18n %}
{% load markdown from markdown %}
{% load price_range from price_ranges %}
{% load staticfiles %}
{% load get_thumbnail from product_images %}

{% block title %}{{ product }} — {{ block.super }}{% endblock %}

{% block breadcrumb %}
  <ul class="breadcrumbs list-unstyled">
    <li><a href="/">
        {% trans "Home" context "Main navigation item" %}
    </a></li>
    {% with product.get_first_category as category %}
      {% if category %}
        <li><a href="{{ category.get_absolute_url }}">{{ category }}</a></li>
      {% endif %}
    {% endwith %}
    <li><a href="{{ product.get_absolute_url }}">{{ product }}</a></li>
  </ul>
{% endblock breadcrumb %}

{% block content %}
  {% if not is_visible %}
    <div class="alert alert-warning" role="alert">
      {% blocktrans trimmed with date=product.available_on|date context "Product details text" %}
          <strong>Warning!</strong>
          You are previewing a product that will become visible on <strong>{{ date }}</strong>.
      {% endblocktrans %}
    </div>
  {% endif %}
  <div class="row product">
    <div id="product-schema-component">
      <script type="application/ld+json">{{ json_ld_product_data|safe }}</script>
    </div>
    <div class="col-md-6 col-12 product__gallery">
      {% with images=product_images %}
        {% if images %}
          <div id="carousel-example-generic" class="carousel slide">
            <div class="carousel-inner" role="listbox">
              {% for image in images %}
                <div class="carousel-item{% if forloop.first %} active{% endif %}">
                  <img class="d-block img-fluid" 
                       src="{% get_thumbnail image.image method="crop" size="540x540" %}" 
                       srcset="{% get_thumbnail image.image method="crop" size="540x540" %} 1x, {% get_thumbnail image.image method="crop" size="1080x1080" %} 2x" alt="">
                </div>
              {% endfor %}
            </div>
            {% if images|length > 1 %}
              <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
                <svg data-src="{% static "images/gallery_arrow.svg" %}" />
              </a>
              <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
                <svg data-src="{% static "images/gallery_arrow.svg" %}" />
              </a>
            {% endif %}
            <ol class="carousel-indicators hidden-sm-down">
              {% for image in images %}
                {% if images|length > 1 %}
                  <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}>
                    <img src="{% get_thumbnail image.image method="crop" size="60x60" %}" 
                         srcset="{% get_thumbnail image.image method="crop" size="60x60" %} 1x, {% get_thumbnail image.image method="crop" size="120x120" %} 2x" 
                         alt="">
                  </li>
                {% endif %}
              {% endfor %}
            </ol>
          </div>
        {% else %}
          <img src="{% static 'images/placeholder540x540.png' %}" 
               srcset="{% static 'images/placeholder540x540.png' %} 1x, {% static 'images/placeholder1080x1080.png' %} 2x" 
               alt="" 
               class="img-fluid">
        {% endif %}
      {% endwith %}
    </div>
    <div class="col-md-6 col-12 product__info">
      <h1 class="product__info__name">
        {{ product }}
      </h1>
      {% if user.is_staff %}
        <p><a href="{% url "dashboard:product-update" pk=product.pk %}">
            {% trans "Edit in dashboard" context "Product details link text" %}
        </a></p>
      {% endif %}
      {% if availability.available %}
        {% if show_variant_picker %}
          <div id="variant-price-component"></div>
        {% else %}
          <h2 class="product__info__price">
            <span>{% price_range availability.price_range %}</span>
            {% if availability.discount %}
              <small class="product__info__price__undiscounted">{% gross availability.price_range_undiscounted.min_price html=True %}</small>
            {% endif %}
            {% if availability.price_range_local_currency %}
              <br>
              <small class="text-info">
                &asymp;
                {% gross availability.price_range_local_currency.min_price html=True %}
              </small>
            {% endif %}
          </h2>
        {% endif %}
      {% endif %}
      {% if is_visible and product.is_in_stock %}
        {% block orderform %}
          {% if show_variant_picker %}
            {% csrf_token %}
            <div id="variant-picker" data-variant-picker-data="{{ variant_picker_data }}" data-action="{% url 'product:add-to-cart' product_id=product.pk slug=product.get_slug %}"></div>
          {% else %}
            <form id="product-form" role="form" class="product-form form-vertical" method="post"
                  action="{% url 'product:add-to-cart' product_id=product.pk slug=product.get_slug %}" novalidate>
              {% csrf_token %}
              {% bootstrap_field form.variant %}
              <div class="product__info__quantity">
                {% bootstrap_field form.quantity %}
              </div>

              <div class="form-group product__info__button">
                <button class="btn primary">
                  {% trans "Add to cart" context "Product details primary action" %}
                </button>
              </div>
            </form>
          {% endif %}
        {% endblock %}
        <div class="product__info__form-error">
          <small class="text-danger"></small>
        </div>

      {% else %}
        <p class="alert alert-warning">
          {% blocktrans context "Product details text" %}This product is currently <strong>unavailable</strong>.{% endblocktrans %}
        </p>
      {% endif %}
      <div class="product__info__description">
        <h3>{% trans "Description" context "Product details title" %}</h3>
        <hr>
        {{ product.description|markdown }}
      </div>
      <hr>
      <table>
        {% for attribute, value in product_attributes.items %}
          <tr>
            <td>{{ attribute }}:</td>
            <td><strong>{{ value }}</strong></td>
          </tr>
        {% endfor %}
      </table>
    </div>
  </div>
{% endblock content %}
